<template>
    <div class="auctionDetail warp">
        <div class="auctionCon">
            <div class="a_left">
                <div class="image">
                    <!-- <el-image :src="imgurls + img" alt=""></el-image> -->
                    <img :src="imgurls + img" alt=""/>
                </div>
            </div>
            <div class="a_right">
                <el-tooltip effect="dark" :content=detailObj.name placement="bottom">
                    <h2>{{detailObj.name}}</h2>
                </el-tooltip>
                <p class="other-focus">
                    <span>拍卖企业：</span>
                    <em>河北一盟拍卖</em>
                </p>
                <p class="other-focus">
                    <span>联系电话：</span>
                    <em>{{detailObj.entry_phone}}</em>
                </p>
                <div class="item_money_time" v-if="detailObj.status == '1'">
                    <p class="start green">即将开始</p>
                    <p><i class="el-icon-time"></i>预计{{detailObj.start_time}}开始</p>
                </div>
                <div class="item_money_time" v-else-if="detailObj.status == '2'">
                    <p class="start red">正在进行</p>
                    <p><i class="el-icon-time"></i>{{detailObj.start_time}}开始</p>
                </div>
                <div class="item_money_time" v-else-if="detailObj.status == '3'">
                    <p class="start gray">已结束</p>
                    <p><i class="el-icon-time"></i>{{detailObj.start_time}}结束</p>
                </div>
                <div class="item_money_time" v-else-if="detailObj.status == '0'">
                    <p class="start gray">暂存</p>
                    <p><i class="el-icon-time"></i>预计{{detailObj.start_time}}开始</p>
                </div>
                <div class="go"> 
                    <v-btn type="plain" size="middle" @click="gohall">进入拍卖大厅</v-btn>
                </div>
                <div class="foot_num">  
                    <p>
                        <span>围观次数：</span>
                        <em>{{detailObj.viewcount}}次</em>
                    </p>
                    <el-divider direction="vertical"></el-divider>
                    <p>
                        <span>标的数量：</span>
                        <em>{{ detailObj.lotscount }}</em>
                    </p>
                </div>
            </div>
        </div>
        <v-tip
            :content="'标的列表'"   
            :font-size="20"
            class="title"
        />
        <div class="card"> 
            <ul class="pai-item-list">
                <li v-for="(val,i) in lotsCardList" :key="i" class="pai-item">
                    <div class="link_wrap" @click="routeDetail(val)">
                        <el-card class="item_card" :body-style="{ padding: '0px' }">
                        <div class="image">
                            <el-image :src="imgurls+ val.image" alt="" class="lot_pic"></el-image>
                        </div>
                        
                        <div class="item_content">
                            <div class="item_title">
                                <div class="in_item_title">{{val.name}}</div>
                            </div>
                            <div class="item_money">
                            <p>
                                <span v-if="val.state=='1'||val.state=='4'||val.state=='0'">起拍价</span>
                                <span v-if="val.state=='2'||val.state=='6'||val.state=='7'">当前价</span>
                                <span v-if="val.state=='3'">成交价</span>

                                <span v-if="val.state=='2'||val.state=='3'||val.state=='5'||val.state=='6'||val.state=='7'" class="red moneyBig">{{val.prices| formatNumber}}元
                                    <span class="m_rmb" v-if="val.unit">/{{val.unit}}</span>
                                </span>
                                <span v-if="val.state=='4'" class="gray moneyBig">{{val.prices| formatNumber}}元
                                    <span class="m_rmb" v-if="val.unit">/{{val.unit}}</span>
                                </span>
                                <span v-if="val.state=='1'||val.state=='0'" class="green moneyBig">{{val.prices| formatNumber}}元
                                    <span class="m_rmb" v-if="val.unit">/{{val.unit}}</span>
                                </span>
                                
                            </p>
                            <div v-if="val.state=='1'" class="item_money_time">
                                <p>预计{{val.time}}开始</p>
                                <p class="greenBtn">即将开始</p>
                            </div>
                            <div v-if="val.state=='2'" class="item_money_time">
                                <p>预计{{val.time}}结束</p>
                                <p class="redBtn">正在进行</p>
                            </div>
                            <div v-if="val.state=='3'" class="item_money_time">
                                <p>{{val.time}}结束</p>
                                <p class="redBtn">已成交</p>
                            </div>
                            <div v-if="val.state=='4'" class="item_money_time">
                                <p>{{val.time}}结束</p>
                                <p class="grayBtn">已流拍</p>
                            </div>
                            <div v-if="val.state=='5'" class="item_money_time">
                                <p>{{val.time}}结束</p>
                                <p class="redBtn">已撤拍</p>
                            </div>
                            <div v-if="val.state=='6'" class="item_money_time">
                                <p>预计{{val.time}}结束</p>
                                <p class="redBtn">等待拍卖师</p>
                            </div>
                            <div v-if="val.state=='7'" class="item_money_time">
                                <p>预计{{val.time}}结束</p>
                                <p class="redBtn">等待拍卖师操作</p>
                            </div>
                            </div>  
                            <div class="item_bottom clearfix">
                                <div>
                                <span>{{val.viewcount}}次围观</span>
                                </div>
                                <div>
                                <span>{{val.history_count}}次出价</span>
                                </div>
                                <div>
                                    <i class="el-icon-star-on" :class="[val.isfollow == 1? 'red' : '']" style="font-size:16px" @click="attentionStar(val.id)"></i>
                                    <span>关注</span>
                                </div>
                            </div>
                        </div>
                    </el-card>
                    </div>  
                </li>
            </ul>
            <div class="footer_page">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                    :page-sizes="[12,20, 30, 40,50]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>  
            </div>
        </div> 
    </div>
  </template>
  <script>
  import {auctionDetails,lotsList} from '@/api/interface'
  import vBtn from '@/components/title/b-btn.vue'
  import vTip from '@/components/title/a-tip.vue'
  import { getUserInfoID,timestampToTime} from '@/utils/auth'
  export default {
    components:{
        vBtn,vTip
    },
    data() {
      return {
        detailObj:{},
        lotsCardList:[], //标的列表
        img:'',
        page:1,
        limit:12,
        total: 0,
      };
      
    },
    created(){
      this.List();
    },
    filters: {
        formatNumber(value) {
            if (value >= 10000) {
            return (value / 10000).toFixed(2) + '万';
            }
            return value;
        }
    },
    methods: {
        List(){
            auctionDetails({id:this.$route.query.auctionId}).then(res => {
                this.img = res.data.image;
                res.data.start_time = timestampToTime(res.data.start_time).ymdhms;
                this.detailObj = res.data;
            });
            var obj;
            if(this.$route.query.type){
                obj={auction_id:this.$route.query.auctionId,type:this.$route.query.type,page:this.page,limit:this.limit}
            }else{
                obj={auction_id:this.$route.query.auctionId,page:this.page,limit:this.limit}
            }
            lotsList(obj).then(res =>{
                if(res.data.length > 0){
                    res.data.forEach(item => {
                        item.time = this.timestampToTime(item.time);
                    })
                    this.lotsCardList = res.data;
                    this.total = res.count;
                }else{
                    this.$message({
                        message: '暂无标的数据',
                        type: "warning",
                    });
                    this.lotsCardList = [];
                }
               
                
            })
        },
        // 点击进入拍卖大厅
        gohall(){
            if(this.lotsCardList.length > 0){
                let query =this.$route.query;
                var id = this.lotsCardList[0].id;
                let {href}= this.$router.resolve({
                    path: '/lots/detail',   // 这里写的是要跳转的路由地址
                    query: {lotsId:id,auctionid:query.auctionId} // 这里写的是页面参数
                });
                window.open(href, '_blank');
            }else{

            }  
        },
        routeDetail(val){
            let {href}= this.$router.resolve({
                path: '/lots/detail',   // 这里写的是要跳转的路由地址
                query: {lotsId:val.id,auctionid:this.$route.query.auctionId}// 这里写的是页面参数
            });
            window.open(href, '_blank');
        },
         //将时间戳转换成日期格式
         timestampToTime(timestamp) {
            var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            // var Y = date.getFullYear() + '年';
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '月';
            var D = (date.getDate() < 10 ? '0'+(date.getDate()) : date.getDate()) + '日';
            var h = (date.getHours() < 10 ? '0'+(date.getHours()) : date.getHours()) + ':';
            var m = (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes());
            // return Y+M+D+h+m+s;
            return M+D+h+m;
        }, 
        // ---------分页
        handleSizeChange(val) {
            this.limit = val;
            this.List();
        },
        //----- 分页---------
        handleCurrentChange(val) {
            this.page = val;
            this.List();
        }
    }
  }
  </script>
  <style lang="less" scoped>
  .auctionDetail{
    min-height: 100vh;
    .auctionCon{
        margin-top: 20px;
        display: flex;
       justify-content: space-between;
       .a_left{
            overflow: hidden;
            .image{
                display: block;
                width: 810px;
                height: 275px;
                position: relative;
                overflow: hidden;
                // .el-image{
                //     // width: 100%;
                //     // height: 100%;
                //     min-height: 100%;
                //     min-width: 100%;
                //     position: absolute;
                //     top: 50%;
                //     transition: all .3s;
                //     transform: translateY(-50%);
                //     z-index: -1;
                // }
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
       }
       .a_right{
            width: 330px;
            height: 255px;
            background: #fff;
            padding: 10px 20px;
            h2{
                font-size: 18px;
                height: 48px;
                line-height: 24px; 
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            .other-focus{
                font-size: 12px;
                color: #999;
                margin: 8px 0;
            }
            .item_money_time{
                margin-bottom: 10px;
               .start{
                    margin-bottom: 10px;
               } 
            }
            .go{
                text-align: center;
            }
            .foot_num{
                display: flex;
                justify-content: space-around;
                align-items: center;
                margin-top: 14px;
            }
       }
    }
    .title{
        margin-top: 20px;
    }
    .card{
        .m_rmb{
            font-size: 12px;
        }
        margin-top: 20px;
        .pai-item-list{
            display: grid;
            justify-content: space-between;
            grid-template-columns: repeat(auto-fill,278px);
            grid-gap: 20px;
        .link_wrap{
            position: relative;
            display: inline-block;
            width: 280px;
            height: 355px;
            text-decoration: none;
            .item_card{
            
            .image {
                height: 190px;
                .lot_pic{
                    display: block;
                    width: 100%;
                    height: 190px;
                    /deep/.el-image__inner{
                    object-fit: cover;
                    }
                }
            }
            .item_content{
                padding-left: 12px;
                padding-right: 12px;
                padding-top: 8px;           
                .item_title{
                    height: 56px;
                    font-size: 18px;
                    .in_item_title{
                        display: -webkit-box;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }
                
                }
                .item_money{
                font-size: 14px;
                color: rgb(153, 153, 153);
                .item_money_time{
                    p{
                    display: inline-block;  
                    }
                    
                    p:last-of-type{
                        font-size: 12px;
                        font-weight: 400;
                        position: absolute;
                        right: 0px;
                        height: 20px;
                        line-height: 20px;
                        text-align: center;
                        border-radius: 12px 0px 0px 12px;
                        color: #fff;
                        padding: 0 6px 0 10px;
                    }
                }
                }
                .item_money{
                p{
                    margin-bottom: 10px;
                }
                }
                .item_bottom{
                height: 40px;
                font-size: 12px;
                line-height: 40px;
                border-top: 1px solid rgb(237, 237, 237);
                display: flex;
                justify-content: space-between;
                color: rgb(153, 153, 153);
                }
            }
            }
            .item_card:hover{
                border: 1px solid #cc0000;
            }

            
            
        }
        }
        .footer_page{
        margin: 26px 0;
            /deep/ .el-pagination{
                display: flex;
                justify-content: center;
            }
        }
    }
    .moneyBig{
        font-size: 20px;
        font-weight: 400;
        margin-left: 4px;
        margin-top: 4px;
    }
  } 
  </style>